
import { Component, OnInit, Output, EventEmitter, Input, AfterViewInit } from '@angular/core';
import { DragDrop } from '@angular/cdk/drag-drop';


@Component({
  selector: 'app-search-result',
  templateUrl: './search-result.component.html',
  styleUrls: ['./search-result.component.scss']
})
export class SearchresultComponent implements OnInit, AfterViewInit {
  @Input() title = null;
  @Output() collEventEmitter = new EventEmitter<any>();
  showPanel = true;
  constructor(private dragDrop: DragDrop) { }

  ngOnInit() {
  }
  constrollCard(e){
    this.collEventEmitter.emit(e);
    // 新增
    this.showPanel = !this.showPanel;
    if(this.showPanel){
      document.getElementById('overlap-panel').style.transform = 'rotate(180deg)';
    }else{
      document.getElementById('overlap-panel').style.transform = 'rotate(0deg)';
    }
  }


  ngAfterViewInit(){
    const dom = document.getElementById('tabledata-detail');
    const dragModal = this.dragDrop.createDrag(dom);
    const title = document.getElementById('tabledata-title');
    // 设置句柄为title，即仅头部可拖动，避免内容中鼠标无法选中的情况
    dragModal.withHandles([title]);
    // 限制拖拽区域在body中，防止溢出
    const domRouter = document.getElementById('contentRouter');
    dragModal.withBoundaryElement(domRouter);
  }
}
